<!DOCTYPE HTML >
<html>

<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        body {
            font-size: 12px;
            line-height: 24px;
            text-align: center;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #mooc {
            width: 399px;
            border: 5px solid #ababab;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
            box-shadow: 2px 2px 10px #ababab;
            margin: 50px auto 0;
            text-align: left;
        }

        #moocTitle {
            height: 62px;
            overflow: hidden;
            font-size: 26px;
            line-height: 62px;
            padding-left: 30px;
            background-image: -moz-linear-gradient(top, #f05e6f, #c9394a);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8fa1ff", endColorstr="#f05e6f", GradientType='0');
            border: 1px solid #f05e6f;
            -moz-border-radius: 8px 8px 0 0;
            -webkit-border-radius: 8px 8px 0 0;
            border-radius: 8px 8px 0 0;
            color: #fff;
            position: relative;
        }

        #moocbox {
            height: 144px;
            width: 335px;
            margin-left: 25px;
            margin-top: 10px;
            overflow: hidden;
        }

        #mooc ul li {
            height: 24px;
        }
    </style>

    <script type="text/javascript">
        var speed = 50;
        var area;
        window.onload = function () {
            area = document.getElementById('moocbox');
            var con1 = document.getElementById('con1');
            var con2 = document.getElementById('con2');
            area.scrollTop = 0;
            con2.innerHTML = con1.innerHTML;
            var myScroll = setInterval("scrollUP()", speed);
            area.onmouseover = function () {
                clearInterval(myScroll);
            }
            area.onmouseout = function () {
                myScroll = setInterval("scrollUP()", speed);
            }
        }

        function scrollUP() {
            if (area.scrollTop >= con1.scrollHeight) {
                area.scrollTop = 0;
            } else {
                area.scrollTop++;
            }
        }
    </script>
</head>

<body>
    <div id="mooc">
        <h3 id="moocTitle">无缝滚动示例</h3>
        <div id="moocbox">
            <ul id="con1">
                <li>11111</li>
                <li>22222</li>
                <li>33333</li>
                <li>44444</li>
                <li>55555</li>
                <li>66666</li>
                <li>77777</li>
                <li>88888</li>
                <li>99999</li>
            </ul>
            <ul id="con2">

            </ul>
        </div>
    </div>
</body>

</html>